<!-- 首页 -->
<template>
	<view class="container">
		<TopNav title="资金明细" theme="white"></TopNav>
		<view class="main">
			<view class="flex justify-center">
				<Subsection :list="subsectionList" v-model="queryParams.type" @change="getData"></Subsection>
			</view>
			<view class="card m-t16">
				<view class="text-gray f-s12 text-center">
					<text>{{detailData.start}} - {{detailData.end}}</text>
				</view>
				<view class="flex justify-evenly align-center m-t15">
					<view class="text-center">
						<view class="">
							<text class="text-bold f-s28">{{detailData.unsettled || 0}}</text>
						</view>
						<view class="m-t11">
							<text class="text-gray f-s12">未结算金额(元)</text>
						</view>
					</view>
					<view class="card-line">

					</view>
					<view class="text-center">
						<view class="">
							<text class="text-bold f-s28">{{detailData.balance || 0}}</text>
						</view>
						<view class="m-t11">
							<text class="text-gray f-s12">可提现金额(元)</text>
						</view>
					</view>
				</view>
				<view class="self-btn m-t20 full-width" hover-class="pressed" @click="handleToPage">
					<text>提现</text>
				</view>

			</view>
			<view class="m-t16">
				<view class="p-lr8">
					<text class="text-bold f-s15">资金明细</text>
				</view>
				<view class="tabs">
					<view class="tabs-item" v-for="(item,index) in tabsList" :key="index"
						:class="{'tabs-item-active':tabsCurrent === index}" @click="handleTabsChange(item,index)">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="flex-1 overflow-hidden m-t12">
				<scroll-view class="full-height" scroll-y="true" @scrolltolower="handleScrollBottom">
					<view class="radius bg-white list-item" v-for="item in list" :key="item.id">
						<view class="flex align-center justify-between">
							<text class="f-s15 text-bold">{{item.typeMsg}}</text>
							<text class="text-bold f-s16 col-text" v-if="item.income == 1">+{{item.money}}</text>
							<text class="text-bold f-s16" v-else>-{{item.money}}</text>
						</view>
						<view class="m-t10" v-if="item.order_sn">
							<text class="text-gray f-s12">订单编号 {{item.order_sn}}</text>
						</view>
						<view class="m-t10 text-gray f-s12 flex justify-between">
							<text>{{item.create_time}}</text>
							<text>{{item.remark}}</text>
						</view>
					</view>
					<view class="padding-tb-xs" v-if="total !== 0">
						<u-loadmore :status="loadmoreStatus" line @loadmore="handleScrollBottom" />
					</view>
					<Empty :show="total === 0" top="20rpx"></Empty>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixins from "@/mixins"
	import Subsection from '@/components/subsection/index.vue'
	import Empty from '@/components/empty/index.vue'
	import {
		capital,
		capitalList
	} from '@/api/index/data.js'
	export default {
		name: "",
		mixins: [mixins],
		components: {
			Subsection
		},
		data() {
			return {
				list: [],
				detailData: {},
				queryParams: {
					type: '',
					income: '',
					limit: 10,
					page: 1
				},
				tabsCurrent: 0,
				tabsList: [{
					text: '全部',
					value: ''
				}, {
					text: '收入',
					value: 1
				}, {
					text: '提现/扣款',
					value: 2
				}],
				subsectionList: [{
					label: '本期',
					value: 0
				}, {
					label: '上期',
					value: 1
				}]
			}
		},
		onLoad() {
			this.queryParams.type = this.subsectionList[0]['value']
			this.queryParams.income = this.tabsList[0]['value']
			this.getData()
		},
		methods: {
			handleToPage() {
				let page = getCurrentPages()
				// 判断上一页是否提现页
				if (page[page.length - 2] && page[page.length - 2]['route'].indexOf('/index/capital/withdraw-deposit') !== -1) {
					this.$tab.navigateBack()
				} else {
					this.$tab.navigateTo("/pages/index/capital/withdraw-deposit")
				}
			},
			handleTabsChange(select, index) {
				this.tabsCurrent = index
				this.queryParams.page = 1
				this.queryParams.income = select['value']
				this.list = []
				this.getList()
			},
			getData() {
				this.getDetail()
				this.getList()
			},
			getDetail() {
				capital({
					type: this.queryParams.type
				}).then(res => {
					let {
						data
					} = res
					this.detailData = data
				})
			},
			getList() {
				capitalList(this.queryParams).then(res => {
					let {
						data: {
							list,
							count,
							total
						}
					} = res
					this.total = count || 0
					this.pageTotal = total || 0
					if (this.queryParams.page === this.pageTotal) this.loadmoreStatus = 'nomore'
					if (this.queryParams.page === 1) {
						this.list = list
					} else if (this.queryParams.page < this.pageTotal) {
						this.list = this.list.concat(list)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/css/var.scss';

	.container {
		background: url('/static/images/index/statictics-bg.png') no-repeat fixed top center / 100% auto;

		.main {
			padding: 24rpx;
			padding-top: 36rpx;
			@include fixed-height;
			overflow: hidden;
			display: flex;
			flex-direction: column;

			.card {
				width: 100%;
				border-radius: 20rpx;
				background-color: #fff;
				padding: 20rpx 32rpx 32rpx 32rpx;
				margin-bottom: 20rpx;

				.card-line {
					width: 2rpx;
					height: 72rpx;
					background-color: #DDE0E6;
				}
			}

			.tabs {
				display: flex;
				margin: 24rpx 0 20rpx 0;

				.tabs-item {
					border-radius: 32rpx;
					width: 160rpx;
					height: 64rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					background-color: #fff;
					margin-right: 20rpx;
				}

				.tabs-item-active {
					background-color: #121924;
					color: #fff;
				}
			}

			.list-item {
				padding: 24rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>